<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!-- Bootstrap -->
    <link href="<?=base_url();?>/public/resource/default/vendor/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="<?=base_url();?>/public/resource/default/css/style.css" rel="stylesheet" >

</head>
<body>

    <div class="container-fluid wp-content">

        <div class="wp-content-header">
            <a><span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span></a>
            <div>
                <span class="mainhead">文章管理</span>
                <span class="subhead">这里是其他的说明性文字</span>
            </div>
        </div>

        <div>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">文章管理</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">商品列表</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">店铺列表</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">内容管理</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!-- 操作提示框 -->
                    <div class="alert alert-success" role="alert">
                        <p>重要提示</p>
                        <a href="#" class="alert-link">...</a>
                        Heads up! This alert needs your attention, but it's not super important.
                    </div>

                    <div class="wp-panel panel-default">
                        <div class="wp-panel-heading">
                            <span class="table-name">商品列表</span>
                            <span class="table-count">共 99 条记录</span>
                            <span class="table-control">
                                <a><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></a>
                                <a><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a>
                            </span>

                            <button class="btn btn-xs btn-success pull-right">button</button>
                        </div>
                        <div class="wp-panel-body">
                            <div class="table-responsive">
                                <table class="table table-hover wp-table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>商品列表</th>
                                            <th>店铺列表</th>
                                            <th>内容管理</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>Comment</td>
                                        <td>Content</td>
                                        <td>Content</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Comment</td>
                                        <td>Content</td>
                                        <td>Content</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Comment</td>
                                        <td>Content</td>
                                        <td>Content</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Comment</td>
                                        <td>Content</td>
                                        <td>Content</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Comment</td>
                                        <td>Content</td>
                                        <td>Content</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>Comment</td>
                                        <td>Content</td>
                                        <td>Content</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <nav>
                        <ul class="pagination pagination-sm">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>

                </div>
                <div role="tabpanel" class="tab-pane" id="profile">...</div>
                <div role="tabpanel" class="tab-pane" id="messages">...</div>
                <div role="tabpanel" class="tab-pane" id="settings">...</div>
            </div>

        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?=base_url();?>/public/resource/default/vendor/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>